<template>
  <div>
    <div slot="com_header"><bread></bread></div>
    <div slot="com_con">
      <!-- 添加分类弹窗 -->
      <el-dialog title="添加参数" :visible.sync="dialogFormVisible">
        <el-input v-model="addName"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addType">确 定</el-button>
        </div>
      </el-dialog>

      <el-alert
        style="padding-left: 550px"
        title="注意:只允许为三级分类设置参数"
        type="warning"
        show-icon
      >
      </el-alert>

      <el-row style="margin-top: 20px; margin-left: -500px">
        <span>请选择分类：</span>
        <el-cascader
          v-model="typeId"
          :options="typeOptions"
          :props="{
            expandTrigger: 'hover',
            label: 'cat_name',
            value: 'cat_id',
          }"
          @change="handleChange"
        ></el-cascader>
      </el-row>

      <!-- 标签页 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-table
            :data="tableList"
            style="width: 100%"
            v-if="this.activeName == 'many'"
          >
            <el-table-column prop="attr_id" label="序号" width="480">
            </el-table-column>
            <el-table-column label="参数名称" width="480">
              <template slot-scope="{ row }">
                <el-input v-if="!row.flag" v-model="row.attr_name"></el-input>
                <div v-if="row.flag">{{ row.attr_name }}</div>
              </template>
            </el-table-column>

            <el-table-column>
              <template v-slot:header="{ row }">
                <el-button type="primary" @click="openaddType()"
                  >添加</el-button
                >
              </template>
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button
                    :type="row.flag ? 'warning' : 'primary'"
                    size="small"
                    @click="upd(row)"
                  >
                    {{ row.flag ? "编辑" : "完成" }}
                  </el-button>
                  <el-button type="danger" size="small" @click="del(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-table
            :data="tableList"
            style="width: 100%"
            v-if="this.activeName == 'only'"
          >
            <el-table-column prop="attr_id" label="序号" width="480">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="480">
            </el-table-column>

            <el-table-column>
              <template v-slot:header="{ row }">
                <el-button type="primary" @click="openaddType()"
                  >添加</el-button
                >
              </template>
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="primary" size="small" @click="upd(row)"
                    >编辑</el-button
                  >
                  <el-button type="danger" size="small" @click="del(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import bread from "../../components/bread";
export default {
  components: {
    bread,
  },

  data() {
    return {
      dialogFormVisible: false,
      // 分类参数列表
      typeOptions: [],

      //双向绑定分类下拉
      selectkeys: [],
      // 下拉框id
      typeId: 0,

      //标签页
      activeName: "many",

      //静态列表表格
      tableList: [],

      // 添加分类参数名称
      addName: "",
    };
  },

  methods: {
    // 获取所有分类参数
    async query_type() {
      let rst = await this.$http.get("categories");
      this.typeOptions = rst.data;
      console.log(rst);
    },

    //下拉框改变
    handleChange() {
      if (this.id != 0) {
        this.table_query();
      } else {
        this.$message.warning("请选择分类");
      }

      console.log(this.typeId);
    },

    //标签页点击
    handleClick() {
      this.table_query();
    },

    // 静态 动态的表格数据
    async table_query() {
      let rst = await this.$http.get(
        `categories/${this.typeId[this.typeId.length - 1]}/attributes`,
        { sel: this.activeName }
      );
      rst.data = rst.data.map((item) => {
        item.flag = true;
        return item;
      });
      this.tableList = rst.data;
      console.log(rst);
    },

    // 添加分类参数 打开弹窗
    openaddType() {
      this.dialogFormVisible = true;
      // let rst = await this.$http.post(`categories/${typeId[typeId.length - 1]}/attributes`,{});
    },
    async addType() {
      let rst = await this.$http.post(
        `categories/${this.typeId[this.typeId.length - 1]}/attributes`,
        {
          attr_name: this.addName,
          attr_sel: this.activeName,
        }
      );
      console.log(rst);
      let { meta } = rst;
      if ((meta.status = 201)) {
        this.$message.success(meta.msg);
        this.dialogFormVisible = false;
        this.table_query();
      }
    },

    //删除参数

    async del(row) {
      console.log(row);
      let rst = await this.$http.delete(
        `/categories/${row.cat_id}/attributes/${row.attr_id}`
      );
      this.table_query();
      console.log(rst);
    },

    // 编辑修改
    async upd(row) {
      if (!row.flag) {
        let rst = await this.$http.put(
          `categories/${row.cat_id}/attributes/${row.attr_id}`,
          { attr_name: row.attr_name, attr_sel: row.attr_sel }
        );
        if (rst.meta.status == 200) {
          this.$message.success(rst.meta.msg);
        }

        console.log(rst);
      }

      row.flag = !row.flag;
    },

  },

  mounted() {
    this.query_type();
  },
};
</script>

<style lang="less" scoped>
</style>